﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="../../../../common/js/common.js"></script>
<script type="text/javascript" language="javascript" src="../../../../frame/js/toolbar.js"></script>
<script type="text/javascript" language="javascript" src="../../../../frame/js/tab.js"></script>
<link rel="Stylesheet" type="text/css" href="../../../../frame/theme/fixheader.css" />
<link rel="stylesheet" type="text/css" href="../../../../frame/theme/toolbar.css" />
<link rel="stylesheet" type="text/css" href="../../../../frame/theme/tab.css" />
<style type="text/css">
.tabicontent
{
	display:none;
	border:solid 1px #BFC7CF;
}
.tabcontent
{
	margin:0px auto;
	padding:0px;
	position:relative;
	width:970px;
}
</style>
<title>带固定工具栏的表单页</title>
</head>
<body>
<div id="container" class="fhc">
	<div id="tbc" class="fhh"></div>
	<div id="content" class="fhb">
		<div id="tabcontent" class="tabcontent">
			<div style="width:100%;height:12px;"></div>
			<div id="tabc"></div>
			<div class="tabt"><div class="tabtl"></div><div class="tabtm" id="tabtitle"></div><div class="tabtr"></div></div>
			<div id="tabi1_content" class="tabicontent">
				<p>Tab1内容</p>
				<p>设置Tab位置</p>
				<div style="clear:both">
				<input type="button" value="右对齐" onclick="tab.align='right';var html=tab.render('tab');document.getElementById('tabc').innerHTML=html;"/>
				<input type="button" value="左对齐" onclick="tab.align='left';var html=tab.render('tab');document.getElementById('tabc').innerHTML=html;"/>
				</div>
			</div>
			<div id="tabi2_content" class="tabicontent">
			<p></p>
			tab2内容
			<textarea id="Textarea1" style="position:relative;top:0px;left:0px;width:99%;height:220px;"></textarea>
			</div>
			<div id="tabi3_content" class="tabicontent">
			<p></p>
			tab3内容
			</div>
			<div id="tabi4_content" class="tabicontent">
			<p></p>
			tab4内容
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" language="javascript">
	//自动设置ie内容区高度
	document.getElementById('content').style.height = (document.body.parentNode.offsetHeight-32)+ 'px';
	//工具栏按钮单击
	function clkTest() {
		var tbb = arguments[0];
		alert('id=' + tbb.id + ' label=' + tbb.label);
	}
	var tb = new Toolbar({ iconPath: '../../../../common/icons/', id: 'tb1', onclick: clkTest, buttons: [{ id: 'tbb1', label: '关闭', icon: 'icon_close.gif' ,onclick:function(tbb){alert('“'+tbb.label+'”按钮特定的单击事件！');}}, { id: 'tbb2', label: '保存', visible:false,icon: 'icon_save.gif' }, { id: 'tbb3', label: '下一个', icon: 'icon_right.gif' }, { id: 'tbb4', label: '上一个', icon: 'icon_left.gif'}] });
	tb.addButton({ id: 'tbbd1', label: '下拉', icon: 'icon_save.gif', dropButtons: [{ id: 'tbbds1', label: '下载到本地', icon: 'icon_down.gif', desc: '下载文件到本地' }, { id: 'tbbds2', label: '导出资源', icon: 'icon_export.gif', desc: '导出资源' }, { id: 'tbbds3', label: '新增文档', icon: 'icon_document.gif' }, { id: 'tbbds4', label: '帮助',visible:false, icon: 'icon_web.gif'}] });
	tb.addButtons([{ id: 'tbb5', label: '下载到本地', icon: 'icon_down.gif', desc: '下载文件到本地' }, { id: 'tbb5x', label: '无图标', desc: '无图标按钮' }, { id: 'tbb6', label: '', icon: 'icon_export.gif', desc: '导出资源' }, { id: 'tbb7', label: '新增文档', icon: 'icon_document.gif' }, { id: 'tbb8', label: '帮助', icon: 'icon_web.gif'}]);
	tb.getButton('tbbd1').getButton('tbbds2');
	var tbHtml = tb.render('tb');
	document.getElementById('tbc').innerHTML = tbHtml;
	//tab项选中
	function showTabItemContent() {
		if(arguments.length<0) return;
		var tabi = arguments[0];
		if(tabi==null) return;
		
		var tabtitle = document.getElementById('tabtitle');
		if (tabtitle != null) {
			//设置ie6 tabtitle
			if (INFO.browser.IE6) {
				var pel = HTMLEL.parent(tabtitle);
				if (pel.offsetWidth) {
					tabtitle.style.width = (pel.offsetWidth - 2) + 'px';
				}
			}
			var title = ((tabi.desc == null || tabi.desc.length == 0) ? tabi.label : tabi.desc);
			if (tabi.title!=null && tabi.title.length>0) title = tabi.title;
			else if (tabi.data && tabi.data.title) title = tabi.data.title;
			tabtitle.innerHTML = title;
		}
		var id = tabi.id + '_content';
		var content = document.getElementById(id);
		if (content != null) content.style.display = 'block';
	}
	//tab项离开
	function hideTabItemContent() {
		if (arguments.length < 0) return;
		var tabi = arguments[0];
		if (tabi == null) return;
		var id = tabi.id + '_content';
		var el = document.getElementById(id);
		if (el == null) return;
		el.style.display = 'none';
	}
	var tab = new Tab({ id: 'tab1', closable: true, imagePath:'sample_images/',closeIcon: 'sample_images/close.gif', closeIconHover: 'sample_images/close_hover.gif', onselect: showTabItemContent, onleave: hideTabItemContent, align: 'right', displayPadding: 20, itemSpace: 10, items: [{ id: 'tabi1', selected: true, label: '基本信息', desc: '基本信息说明', icon: 'tabsample/test.gif', title: '基本信息内容' }, { id: 'tabi2', label: '审批意见', data: { title: '审批意见信息'} }, { id: 'tabi3', label: '审批日志'}] });
	tab.addItem({ id: 'tabi4', label: '很长很长很长很长的标签',visible:true, icon: '../../../../common/icons/icon_document.gif', desc: '很长很长很长很长的标签' });
	tab.getItem('tabi1');
	tab.getItem(0);
	var tabHtml = tab.render('tab');
	tab.onclose = function(tabi) {
		alert(tabi.label+'被关了');
	}
	document.getElementById('tabc').innerHTML = tabHtml;
</script>
</body>
</html>